<template>
  <div>
    <div class="header_search_nav search_form">
      <div class="ipt_left">
        <el-form ref="queryParams" :model="queryParams" label-width="80px" @submit.native.prevent>
          <el-row>
            <el-col :span="4">
              <el-form-item label="门店" prop="storeId">
                <el-select
                  class="w-200"
                  v-model="queryParams.storeId"
                  placeholder="请选择门店名称"
                  filterable
                  :clearable="true"
                >
                  <el-option
                    v-for="item in Stores"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="名称" prop="userName">
                <el-input
                  v-model="queryParams.userName"
                  placeholder="请输入名称"
                  class="w-100"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="工资月份" prop="wagesMoon">
                <el-date-picker
                  v-model="queryParams.wagesMoon"
                  type="month"
                  placeholder="选择月"
                  value-format="yyyy-MM"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="入职日期" prop="time">
                <el-date-picker
                  v-model="queryParams.time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="5">
              <el-form-item label="岗位" prop="postId">
                <el-select
                  class="w-200"
                  v-model="queryParams.postId"
                  placeholder="请选择岗位"
                  filterable
                  :clearable="true"
                >
                  <el-option
                    v-for="item in PostOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="确认状态" prop="wagesStatus">
                <!-- {{ wagesStatusOptions }} -->
                <el-select
                  class="w-200"
                  v-model="queryParams.wagesStatus"
                  placeholder="请选择"
                  filterable
                  :clearable="true"
                >
                  <el-option
                    v-for="item in wagesStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <div class="btn_right">
                <button class="btn1" @click="handleQuery">筛选</button>
                <button class="btn2" @click="resetQuery">重置</button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <!-- 预约列表 -->
    <div class="table_card">
      <!-- 上部分 title -->
      <div class="table_card_top">
        <span class="solid_left"></span>
        <div class="table_card_title">工资单</div>
        <div class="op_right">
          <button
            class="primary_button"
            :loading="exportLoading"
            @click="AddPayrolls"
            v-hasPermi="['store:wages:add']"
          >
            新增工资单
          </button>
          <button
            class="primary_button"
            :loading="exportLoading"
            @click="generatePayrolls"
            v-hasPermi="['store:wages:job']"
          >
            生成工资单
          </button>
          <button
            class="primary_button"
            :loading="exportLoading"
            @click="Excle"
          >
            导出工资单
          </button>
        </div>
      </div>

      <div class="table_list">
        <el-table
          :data="tableList"
          stripe
          style="width: 100%"
          v-loading="loading"
        >
          <!-- <el-table-column prop="rtNo" label="预约单号" width="180">
            <template slot-scope="scope">
              <div @click="BookingDetail(scope.row)" style="color: #0079fe">
                <span class="rtNo">{{ scope.row.rtNo }}</span>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="wagesMoon" label="工资月份"> </el-table-column>
          <el-table-column prop="hiredate" label="入职日期" width="120">
          </el-table-column>
          <el-table-column prop="dptName" label="门店名称" width="180">
          </el-table-column>
          <el-table-column prop="postName" label="岗位" width="120">
          </el-table-column>
          <el-table-column prop="nickname" label="姓名"> </el-table-column>
          <el-table-column prop="stageName" label="艺名"> </el-table-column>
          <el-table-column prop="workDayWant" label="应出勤"> </el-table-column>
          <el-table-column prop="workDayReal" label="实际出勤">
          </el-table-column>
          <el-table-column prop="basicMoney" label="基本工资">
          </el-table-column>
          <el-table-column prop="basicWorkMoney" label="考勤工资">
          </el-table-column>
          <el-table-column prop="workHour" label="加班时长"> </el-table-column>
          <el-table-column prop="workMoney" label="加班工资"> </el-table-column>
          <el-table-column prop="hardMoney" label="手工"> </el-table-column>
          <el-table-column prop="hardAwardMoney" label="手工提成">
          </el-table-column>
          <el-table-column
            prop="hardAwardExtMoney"
            label="手工额外提成"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="rechargeMoney" label="充卡业绩" width="100">
          </el-table-column>
          <el-table-column
            prop="rechargeAwardMoney"
            label="充卡提成"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="clockAddMoney" label="加钟提成">
          </el-table-column>
          <el-table-column prop="clockSpotMoney" label="点钟提成">
          </el-table-column>
          <el-table-column prop="hospitalityMoney" label="待客提成">
          </el-table-column>
          <el-table-column prop="visitorMoney" label="约客提成">
          </el-table-column>
          <el-table-column prop="otherMoneyAdd" label="其他奖金">
          </el-table-column>
          <el-table-column prop="otherMoneySub" label="其他扣款">
          </el-table-column>
          <el-table-column prop="storePoMoney" label="门店业绩" width="100">
          </el-table-column>
          <el-table-column prop="poMoney" label="业绩提成" width="100">
          </el-table-column>
          <el-table-column prop="bonusMoney" label="奖金(店长)" width="100">
          </el-table-column>
          <el-table-column prop="workAllMoney" label="全勤"> </el-table-column>
          <el-table-column prop="postAllowanceMoney" label="岗位津贴">
          </el-table-column>
          <el-table-column prop="workYearMoney" label="工龄工资">
          </el-table-column>
          <el-table-column prop="trainSubsidyMoney" label="培训补助">
          </el-table-column>
          <el-table-column prop="trainAwardMoney" label="培训提成">
          </el-table-column>
          <el-table-column prop="totalMoney" label="总工资"></el-table-column>

          <el-table-column prop="wagesStatus" label="确认状态">
            <template slot-scope="scope">
              <div>{{ wagesStatusObj[scope.row.wagesStatus] }}</div>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="UpdatePayroll(scope.row)"
                v-if="scope.row.wagesStatus === 'N' || scope.row.wagesStatus === 'Y'"
                >更新工资单</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="ApprovePayroll(scope.row)"
                v-if="scope.row.wagesStatus === 'N'"
                >工资单确认</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="PayrollDetail(scope.row)"
                >工资单详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <!-- 工资单 -->
    <el-dialog
      :title="titleNav"
      :visible.sync="PayrollVis"
      width="800px"
      class="no-dialog-padding"
      @close="PayrollCancle"
    >
      <div class="setItem">
        <el-form
          :model="PayrollForm"
          :rules="PayrollRules"
          ref="PayrollForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-row :gutter="24">
            <!-- {{ PayrollForm }} -->
            <el-col :span="12" v-if="!Payrolledit">
              <el-form-item label="用户" prop="userId">
                <el-select
                  class="w-100"
                  v-model="PayrollForm.userId"
                  placeholder="请输入"
                  filterable
                  :clearable="true"
                >
                  <el-option
                    v-for="item in userWorksList"
                    :key="item.id"
                    :label="`${item.nickname}`"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="Payrolledit">
              <el-form-item label="用户" prop="userName">
                <el-input
                  :disabled="true"
                  v-model="PayrollForm.userName"
                  :controls="false"
                  class="w-100 text-left"
                  label="请输入"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="!Payrolledit">
              <el-form-item label="部门" prop="dptId">
                <treeselect
                  class="w-100"
                  v-model="PayrollForm.dptId"
                  :options="deptOptions"
                  :show-count="true"
                  :clearable="false"
                  placeholder="请选择部门"
                  :normalizer="normalizer"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="Payrolledit">
              <el-form-item label="部门" prop="dptName">
                <el-input
                  v-model="PayrollForm.dptName"
                  :controls="false"
                  class="w-100 text-left"
                  label="请输入"
                  placeholder="请输入"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12" v-if="!Payrolledit">
              <el-form-item label="岗位" prop="postId">
                <el-select
                  v-model="PayrollForm.postId"
                  placeholder="请选择"
                  class="w-100"
                  filterable
                >
                  <el-option
                    v-for="item in UserOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="Payrolledit">
              <el-form-item label="岗位" prop="postName">
                <el-input
                  v-model="PayrollForm.postName"
                  :controls="false"
                  class="w-100 text-left"
                  label="请输入"
                  placeholder="请输入"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工资月份" prop="wagesMoon">
                <el-date-picker
                  v-model="PayrollForm.wagesMoon"
                  type="month"
                  placeholder="选择工资月份"
                  :value-format="'yyyy-MM-dd'"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="应出勤" prop="workDayWant">
                <el-input-number
                  v-model="PayrollForm.workDayWant"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实际出勤" prop="workDayReal">
                <el-input-number
                  v-model="PayrollForm.workDayReal"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="基本工资" prop="basicMoney">
                <el-input-number
                  v-model="PayrollForm.basicMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考勤工资" prop="basicWorkMoney">
                <el-input-number
                  v-model="PayrollForm.basicWorkMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="加钟提成" prop="clockAddMoney">
                <el-input-number
                  v-model="PayrollForm.clockAddMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="点钟提成" prop="clockSpotMoney">
                <el-input-number
                  v-model="PayrollForm.clockSpotMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="约客提成" prop="visitorMoney">
                <el-input-number
                  v-model="PayrollForm.visitorMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="待客提成" prop="hospitalityMoney">
                <el-input-number
                  v-model="PayrollForm.hospitalityMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="业绩(技师)" prop="rechargeMoney">
                <el-input-number
                  v-model="PayrollForm.rechargeMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业绩提成(技师)" prop="rechargeAwardMoney">
                <el-input-number
                  v-model="PayrollForm.rechargeAwardMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item> </el-col
          ></el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="加班时长" prop="workHour">
                <el-input-number
                  v-model="PayrollForm.workHour"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="加班工资" prop="workMoney">
                <el-input-number
                  v-model="PayrollForm.workMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="手工提成" prop="hardAwardMoney">
                <el-input-number
                  v-model="PayrollForm.hardAwardMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手工额外提成" prop="hardAwardExtMoney">
                <el-input-number
                  v-model="PayrollForm.hardAwardExtMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="其他奖金" prop="otherMoneyAdd">
                <el-input-number
                  v-model="PayrollForm.otherMoneyAdd"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="其他扣款" prop="otherMoneySub">
                <el-input-number
                  v-model="PayrollForm.otherMoneySub"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="业绩提成(店长)" prop="poMoney">
                <el-input-number
                  v-model="PayrollForm.poMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖金(店长)" prop="bonusMoney">
                <el-input-number
                  v-model="PayrollForm.bonusMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="岗位津贴" prop="postAllowanceMoney">
                <el-input-number
                  v-model="PayrollForm.postAllowanceMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工龄工资" prop="workYearMoney">
                <el-input-number
                  v-model="PayrollForm.workYearMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训补助" prop="trainSubsidyMoney">
                <el-input-number
                  v-model="PayrollForm.trainSubsidyMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训提成" prop="trainAwardMoney">
                <el-input-number
                  v-model="PayrollForm.trainAwardMoney"
                  :controls="false"
                  class="w-100 text-left"
                  :min="0"
                  :max="10000000"
                  label="请输入"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="PayrollCancle">取消</el-button>
        <el-button type="primary" :loading="PayrollLoading" @click="PayrollSave"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 生成工资单 -->
    <el-dialog
      title="生成工资单"
      :visible.sync="generatePayrollVis"
      width="500px"
      class="no-dialog-padding"
      @close="generatePayrollCancle"
    >
      <div class="setItem">
        <el-form
          :model="generatePayrollForm"
          :rules="generatePayrollRules"
          ref="generatePayrollForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="日期" prop="moon">
            <el-date-picker
              v-model="generatePayrollForm.moon"
              type="month"
              placeholder="选择月"
              class="w-100"
              value-format="yyyy-MM"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="generatePayrollCancle">取消</el-button>
        <el-button
          type="primary"
          :loading="generatePayrollLoading"
          @click="GeneratePayrollSave"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getWagesPage,
  ApproveWagesInfo,
  getWagesInfo,
  UpdateWages,
  ExlWages,
  getListAllSimple,
  generatePayroll,
  AddWages,
  getUserWork,
  listSimpleDepts,
  getPostSimpleList,
} from "@/api/bpm/Payroll";
import { getStoreInfoList } from "@/api/business/stores";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Storeadminpayroll",
  components: { Treeselect },
  data() {
    return {
      deptOptions: [],
      UserOptions: [],
      userWorksList: [],
      generatePayrollVis: false, // 生成工资单
      generatePayrollLoading: false,
      generatePayrollForm: {
        moon: "",
      },
      generatePayrollRules: {
        moon: [{ required: true, message: "请选择月份", trigger: "change" }],
      },
      Stores: [],
      PayrollVis: false,
      Payrolledit: false,
      titleNav: "",
      PayrollLoading: false,
      PayrollForm: {
        basicMoney: "",
        basicWorkMoney: "",
        clockAddMoney: "",
        clockSpotMoney: "",
        dptId: "",
        hardAwardExtMoney: "",
        hardAwardMoney: "",
        hardMoney: "",
        hospitalityMoney: "",
        otherMoneyAdd: "",
        otherMoneySub: "",
        rechargeAwardMoney: "",
        rechargeMoney: "",
        totalMoney: "",
        visitorMoney: "",
        wagesId: "",
        workDayReal: "",
        workDayWant: "",
        workHour: "",
        workMoney: "",
        poMoney: "",
        bonusMoney: "",
        postAllowanceMoney: "",
        workYearMoney: "",
        trainSubsidyMoney: "",
        trainAwardMoney: "",
        dptId: null,
        postId: "", // 岗位
        postName: "",
        userId: "",
        userName: "",
        dptName: "",
        wagesMoon: "", // 工资月份
      },
      PayrollRules: {
        userId: [{ required: true, message: "请选择", trigger: "change" }],
        postId: [{ required: true, message: "请选择", trigger: "change" }],
        dptId: [{ required: true, message: "请选择", trigger: "change" }],
        wagesMoon: [{ required: true, message: "请选择", trigger: "change" }],
      },

      textarea: "",
      value: true,
      loading: false,
      wagesStatusObj: {
        Y: "已确认",
        N: "未确认",
      },

      wagesStatusOptions: [
        {
          value: "Y",
          label: "已确认",
        },
        {
          value: "N",
          label: "未确认",
        },
      ],

      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        storeId: "",
        userName: "",
        wagesMoon: "",
        time: [],
        postId: "",
        wagesStatus: "", // 选择的确认状态
      },
      total: 0,
      tableList: [],
      BookingVis: false,
      PayrollLoading: false,
      exportLoading: false,
      PostOptions: [], // 岗位
    };
  },

  created() {
    this.getList();
    this.getSupportStores();
    this.getListAllSimpleData();
    this.getTreeselect();
    this.getPostSimpleData();
  },

  mounted() {},

  methods: {
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
    // 获得精简岗位列表
    getPostSimpleData() {
      getPostSimpleList({}).then((response) => {
        this.UserOptions = response.data;
      });
    },
    getTreeselect() {
      // 原来的获取组织接口
      listSimpleDepts().then((response) => {
        // 处理 deptOptions 参数
        this.deptOptions = [];
        this.deptOptions.push(...this.handleTree(response.data, "id"));

        let Item = {};
        for (let i = 0; i < response.data.length; i++) {
          let item = response.data[i];
          Item[item.id] = item.name;
        }
        this.deptNames = Item;
      });
    },
    getUsers() {
      getUserWork({}).then((res) => {
        console.log(res, "dsfksdlkfl");
        this.userWorksList = res.data;
      });
    },
    // 新增工资单
    AddPayrolls() {
      this.PayrollVis = true;
      this.titleNav = "新增工资单";
      this.PayrollForm.wagesId = "";
      this.PayrollForm.dptId = null;
      this.Payrolledit = false;
      this.getUsers();
    },

    generatePayrolls() {
      this.generatePayrollVis = true;
    },

    // 生成工资单
    GeneratePayrollSave() {
      this.generatePayrollLoading = true;
      this.$refs["generatePayrollForm"].validate((valid) => {
        if (valid) {
          generatePayroll(this.generatePayrollForm)
            .then((res) => {
              this.generatePayrollLoading = false;
              const { code } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.generatePayrollCancle();
                this.getList();
              }
            })
            .catch((err) => {
              this.generatePayrollLoading = false;
            });
        } else {
        }
      });
    },

    //取消 生成工资单
    generatePayrollCancle() {
      this.$nextTick(() => {
        this.generatePayrollVis = false;
      });
      this.resetFormData("generatePayrollForm");
    },

    // 岗位
    getListAllSimpleData() {
      getListAllSimple()
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.PostOptions = data;
          }
        })
        .catch((err) => {});
    },

    // 工资单导出
    Excle() {
      this.$modal
        .confirm("是否确认导出工资单数据?")
        .then(() => {
          this.exportLoading = true;
          return ExlWages(this.queryParams);
        })
        .then((response) => {
          this.$download.excel(response, "工资单");
          this.exportLoading = false;
        })
        .catch(() => {
          this.exportLoading = false;
        });
    },

    // 查询所有门店
    getSupportStores() {
      getStoreInfoList(this.queryParams)
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.Stores = data;
          }
        })
        .catch((err) => {});
    },

    // 工资单详情
    getWagesDetailInfo(row) {
      getWagesInfo({
        wagesId: row.wagesId,
        dptId: row.dptId,
      })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.PayrollForm = {
              basicMoney: data.basicMoney,
              basicWorkMoney: data.basicWorkMoney,
              userId: data.userId,
              postName: data.postName,
              userName: data.userName,
              dptName: data.dptName,
              wagesMoon: data.wagesMoon,
              postId: data.postId,
              clockAddMoney: data.clockAddMoney,
              clockSpotMoney: data.clockSpotMoney,
              dptId: data.dptId,
              hardAwardExtMoney: data.hardAwardExtMoney,
              hardAwardMoney: data.hardAwardMoney,
              hardMoney: data.hardMoney,
              hospitalityMoney: data.hospitalityMoney,
              otherMoneyAdd: data.otherMoneyAdd,
              otherMoneySub: data.otherMoneySub,
              rechargeAwardMoney: data.rechargeAwardMoney,
              rechargeMoney: data.rechargeMoney,
              totalMoney: data.totalMoney,
              visitorMoney: data.visitorMoney,
              wagesId: data.wagesId,
              workDayReal: data.workDayReal,
              workDayWant: data.workDayWant,
              workHour: data.workHour,
              workMoney: data.workMoney,
              poMoney: data.poMoney,
              bonusMoney: data.bonusMoney,
            };
            console.log(data, "dsdsdsd");
          }
        })
        .catch((err) => {});
    },

    PayrollDetail(row) {
      this.$router.push({
        path: "/storeAdminfinance/PayrollDetail",
        query: { wagesId: row.wagesId, dptId: row.dptId },
      });
    },

    // 更新工资单
    UpdatePayroll(row) {
      this.PayrollVis = true;
      this.Payrolledit = true;
      this.titleNav = "更新工资单";
      this.PayrollForm.wagesId = row.wagesId;
      this.PayrollForm.dptId = row.dptId;
      this.getWagesDetailInfo(row);
    },

    // 工资单确认
    ApprovePayroll(item) {
      this.$confirm("要确认该工资单吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          ApproveWagesInfo({
            wagesId: item.wagesId,
          })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.getList();
              }
            })
            .catch((err) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    PayrollCancle() {
      this.resetFormData("PayrollForm");
      this.$nextTick(() => {
        this.PayrollVis = false;
      });
    },

    PayrollSave() {
      if (this.PayrollLoading) {
        return false;
      }

      this.$refs["PayrollForm"].validate((valid) => {
        if (valid) {
          this.PayrollLoading = true;

          if (!this.PayrollForm.wagesId) {
            this.AddWagesAction();
          } else {
            this.UpdateWagesAction();
          }
        }
      });
    },

    // 更新工资单
    UpdateWagesAction() {
      UpdateWages(this.PayrollForm)
        .then((res) => {
          this.PayrollLoading = false;
          const { code } = res;
          if (code === 0) {
            this.getList();
            this.$message.success("操作成功");
            this.PayrollCancle();
          }
        })
        .catch(() => {
          this.PayrollLoading = false;
        });
    },

    // 新增工资单
    AddWagesAction() {
      AddWages(this.PayrollForm)
        .then((res) => {
          this.PayrollLoading = false;
          const { code } = res;
          if (code === 0) {
            this.getList();
            this.$message.success("操作成功");
            this.PayrollCancle();
          }
        })
        .catch(() => {
          this.PayrollLoading = false;
        });
    },

    // 筛选
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },

    // 工资单列表
    getList() {
      this.loading = true;
      let queryParams = JSON.parse(JSON.stringify(this.queryParams));

      if (!!this.queryParams.time) {
        queryParams.hiredateStart = this.queryParams.time[0];
        queryParams.hiredateEnd = this.queryParams.time[1];
        queryParams.time = [];
      }
      getWagesPage(queryParams)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.tableList = data.list;
            this.total = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryParams");
      this.handleQuery();
    },

    // 表单重置
    resetFormData(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.goodTop {
  width: 100%;
  height: 48px;
  background: #ffffff;
  display: flex;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 48px;
  padding-left: 16px;
  .good_list {
    margin-right: 32px;
  }

  .good_active {
    color: #0052d9;
    border-bottom: 1px solid #0052d9;
  }
}

.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}

.separate_left {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-right: 12px;
}
.separate_right {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-left: 12px;
}
.setItem {
  padding-top: 20px;
  padding-right: 30px;
  margin-left: 30px;
}
.rtNo {
  cursor: pointer;
}
</style>
